<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.css" rel="stylesheet" />
		<style>
			.slider-img{
				width: 100vw;
				height: 50vw;
			}
		</style>
	</head>
	
	<body>
		<div class="mui-content mui-scroll-wrapper" id="refreshContainer">
			<div id="slider" class="mui-slider" >
			
			  
			</div>
			<ul class="mui-table-view" id="view-list">
					
			</ul>
		</div>
		<script src="js/mui.js"></script>
		<script src="js/app.js"></script>
		<script type="text/javascript">
			mui.init({
				preloadPages:[{
					id:'detail.html',
					url:'notice/detail.html'
				}],
				pullRefresh: {
				container: "#refreshContainer", //下拉刷新容器标识，querySelector能定位的css选择器均可，比如：id、.class等
				down: {
					style: 'circle', //必选，下拉刷新样式，目前支持原生5+ ‘circle’ 样式
					color: '#2BD009', //可选，默认“#2BD009” 下拉刷新控件颜色
					height: '50px', //可选,默认50px.下拉刷新控件的高度,
					range: '100px', //可选 默认100px,控件可下拉拖拽的范围
					offset: '0px', //可选 默认0px,下拉刷新控件的起始位置
					auto: false, //可选,默认false.首次加载自动上拉刷新一次
					callback: show //必选，刷新函数，根据具体业务来编写，比如通过ajax从服务器获取新数据；
				}
	}
			});
			var detailPage = null;
			mui.plusReady(function () {
				
				//可以设置两个ajax请求,一个请求公告,一个请求新闻资讯.
			  addslider();
			  addlist();
					//绑定各列表的点击事件
					mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){
						var id = this.getAttribute("id");
						console.log(id);
						if(!detailPage){
							detailPage = plus.webview.getWebviewById('detail.html');
						}
						//触发详情页的newsId事件
						mui.fire(detailPage,'newsId',{id:id});
						mui.openWindow({
							id:'detail.html'
						}
							
						);
					});
					//绑定各轮播图的点击事件
					mui(".mui-slider").on('tap',".mui-slider-item",function(){
						var id = this.getAttribute("id");
						console.log(id);
						if(!detailPage){
							detailPage = plus.webview.getWebviewById('detail.html');
						}
						//触发详情页的newsId事件
						mui.fire(detailPage,'newsId',{id:id});
						mui.openWindow({
							id:'detail.html'
						}
							
						);
					});
			})
			//公告轮播实现代码
			function sliderdata(data){
				var slider = document.getElementById("slider");
				slider.innerHTML = "";
				var sliderGroup = document.createElement('div');
				sliderGroup.className = 'mui-slider-group mui-slider-loop';
				slider.appendChild(sliderGroup);
				var sliderIndicator = document.createElement('div');
				sliderIndicator.className = 'mui-slider-indicator mui-text-right';
				slider.appendChild(sliderIndicator);
				for(var i = 0;i<data.length;i++){
					if(0==i){
						var sliderItemDuplicate = document.createElement('div');
						sliderItemDuplicate.className = 'mui-slider-item mui-slider-item-duplicate';
						sliderItemDuplicate.innerHTML = '<a href ="#"><img src="image/'+data.length-1+'.jpg" class="slider-img"/><p class = "mui-slider-title">'
						+data[data.length-1].title+'</p></a>';
						sliderGroup.appendChild(sliderItemDuplicate);
					}
					var sliderItem = document.createElement('div');
					sliderItem.className = 'mui-slider-item';
					sliderItem.id = data[i].id;
					sliderItem.innerHTML = '<a href =#><img src="image/'+i%5+'.jpg" class="slider-img"/><p class = "mui-slider-title">'+data[i].title+'</p></a>';
					sliderGroup.appendChild(sliderItem);
					var indicatorItem = document.createElement('div');
					if(i == 0){
						indicatorItem.className = 'mui-indicator mui-active';
					}else{
						indicatorItem.className = 'mui-indicator';
					}
					sliderIndicator.appendChild(indicatorItem);
					if(data.length -1 == i){
						var sliderItemDuplicate = document.createElement('div');
						sliderItemDuplicate.className = 'mui-slider-item mui-slider-item-duplicate';
						sliderItemDuplicate.innerHTML = '<a href =#><img src="image/'+0+'.jpg" class="slider-img"/><p class = "mui-slider-title">'+data[0].title+'</p></a>';
						sliderGroup.appendChild(sliderItemDuplicate);
					}
					var slidercss = mui('.mui-slider');
					slidercss.slider({
						interval:2000
					});
				}
			}
			function tablelist(data){
				var table = document.body.querySelector('.mui-table-view');
				table.innerHTML = "";
				var cells = document.body.querySelectorAll('.mui-table-view-cell');
				for(var i=0;i<data.length;i++){
					var li = document.createElement('li');
					li.className = 'mui-table-view-cell mui-media';
					li.id = data[i].id;
					li.innerHTML = '<a href="#"><img class="mui-media-object mui-pull-left" src="image/'+i%10+'.png"><div class = "mui-media-body">'+data[i].title+'</div></a>';
					table.appendChild(li);
				}
			}
			function show(){
				addslider();
				addlist();
				mui('#refreshContainer').pullRefresh().endPulldown();
				mui.toast("刷新成功");
			}
			function addslider(){
				mui.ajax(app.serverUrl+'/notice/selectByType',{
					data:{
						type:"公告"
					},
					dataType:'json',//服务器返回json格式数据
					type:'get',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						console.log(JSON.stringify(data));
							sliderdata(data.data);
					},
					error:function(xhr,type,errorThrown){
						
					}
				});
			}
			function addlist(){
				mui.ajax(app.serverUrl+'/notice/selectByType',{
					data:{
						type:"资讯"
					},
					dataType:'json',//服务器返回json格式数据
					type:'post',//HTTP请求类型
					timeout:10000,//超时时间设置为10秒；
					success:function(data){
						console.log(JSON.stringify(data));
						tablelist(data.data);
					},
					error:function(xhr,type,errorThrown){
						
					}
				});
			}
		</script>
	</body>

</html>
